<!--树 多选框-->
<template>
  <el-dropdown ref="baseTreeMultipleDrop" trigger="click" @click.native="stop">
    <el-input v-model="label" :disabled="disabled" :placeholder="placeholder" />
    <el-dropdown-menu
      slot="dropdown"
      class="base-tree-multiple"
      popper-class="base-tree-popper"
      :disabled="disabled"
    >
      <el-tree
        ref="baseTreeMultiple"
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="{
          children: 'children',
          label: $i18n.locale === 'en' ? 'eName' : 'name',
        }"
        :check-strictly="isCheck"
        @check="checkPosition"
        @check-change="handleNodeClick"
      >
      </el-tree>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "BaseTreeMultiple",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    radio: {
      type: Boolean,
      default: false,
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      label: "",
    };
  },
  watch: {
    value: function() {
      this.setDefaultNode();
    },
    isCheck: {
      handler() {},
      immediate: true,
    },
  },
  methods: {
    stop() {
      if (this.disabled) {
        this.$refs.baseTreeMultipleDrop.hide();
      }
    },
    setDefaultNode() {
      if (!this.value.length) {
        this.label = "";
      }

      this.$refs.baseTreeMultiple.setCheckedKeys(this.value);
      this.$nextTick(() => {
        const checkedNodes = this.$refs.baseTreeMultiple.getCheckedNodes();
        if (checkedNodes && checkedNodes.length) {
          this.label = checkedNodes
            .map((v) => (this.$i18n.locale === "en" ? v.eName : v.name))
            .join(",");
        } else {
          this.label = "";
        }
      });
    },
    checkPosition(node, data) {
      let checkStr = [];
      if (data.checkedNodes && data.checkedNodes.length) {
        checkStr = data.checkedNodes
          .filter((v) => !v.children || !v.children.length)
          .map((v) => {
            return this.$i18n.locale === "en" ? v.eName : v.label;
          });
      }
      this.label = checkStr.length ? checkStr.join(",") : "";
      this.$emit("input", data.checkedKeys);
    },
    handleNodeClick(data, checked, node) {
      if (this.radio) {
        if (checked === true) {
          this.checkedId = data.id;
          this.$refs.baseTreeMultiple.setCheckedKeys([data.id]);
        } else {
          if (this.checkedId === data.id) {
            this.$refs.baseTreeMultiple.setCheckedKeys([data.id]);
          }
        }
      }
    },
  },
};
</script>

<style lang="scss">
.base-tree-multiple {
  width: 302px !important;
  left: 367px !important;
  max-height: 500px;
  overflow: auto;
}

/*此处是为了添加横向滚动条*/
.el-tree > .el-tree-node {
  min-width: 100%;

  display: inline-block;
}
.base-tree-popper {
  max-height: 240px;
  overflow: auto;
  .el-select-dropdown__item {
    height: max-content;
    padding: 0;
    font-weight: 500;
    .hover {
      background: #fff;
    }
    .el-tree-node__content {
      height: 34px;
      line-height: 34px;
      font-weight: normal;
    }
    .is-current {
      & > .el-tree-node__content {
        .el-tree-node__label {
          color: #409eff;
        }
      }
    }
  }
}
</style>
